<template>
  <div class="info-main-content main-body-1200">
    <div class="main-body">
      <side-menu active="6"></side-menu>
      <div class="info-main">
        <div class="wy-main-title">
          <p>首页 / 物流信息服务 / <span>人力信息</span></p>
        </div>
        <div class="info-detail">
            <a-form :form="form" layout="inline">
            <a-row>
              <a-col :span='20'>
                <a-row class="wy-m-b-26">
                  <a-col :span='12'>
                    <a-form-item label="车辆常驻地:">
                      <a-input v-decorator="['note', {rules: [{ message: 'Please input your note!' }]} ]" placeholder="请选择车辆常驻地"/>
                    </a-form-item>
                  </a-col>
                  <a-col :span='12'>
                      <a-form-item label="车辆类型:">
                      <a-input v-decorator="['note', {rules: [{ message: 'Please input your note!' }]} ]" placeholder="请选择车辆类型"/>
                  </a-form-item>
                  </a-col>
                </a-row>
                <a-row class="wy-m-b-26">
                  <a-col :span='12'>
                      <a-form-item label="车源类型:">
                      <a-input v-decorator="['note', {rules: [{ message: 'Please input your note!' }]} ]" placeholder="请输入车牌号"/>
                  </a-form-item>
                  </a-col>
                  <a-col :span='12'>
                      <a-form-item label="车厂:">
                      <a-input v-decorator="['note', {rules: [{ message: 'Please input your note!' }]} ]" placeholder="请输入车牌号"/>
                  </a-form-item>
                  </a-col>
                </a-row>
                <a-row class="wy-m-b-26">
                  <a-col :span='12'>
                      <a-form-item label="载重:">
                      <a-input v-decorator="['note', {rules: [{ message: 'Please input your note!' }]} ]" placeholder="请选择车辆常驻地"/>
                  </a-form-item>
                  </a-col>
                  <a-col :span='12'>
                      <a-form-item label="发布者:">
                      <a-input v-decorator="['note', {rules: [{ message: 'Please input your note!' }]} ]" placeholder="请选择车辆类型"/>
                  </a-form-item>
                  </a-col>
                </a-row>
              </a-col>
              <a-col :span='4' class="wy-p-l-15">
                <a-row>
                  <a-col :span='24' class="wy-m-b-26">
                    <a-button type="primary" html-type="submit">立即搜索</a-button>
                  </a-col>
                  <a-col :span='24'>
                    <a-button html-type="submit">重置信息</a-button>
                  </a-col>
                </a-row>
              </a-col>
            </a-row>
            </a-form>
            <div class='v-list'>
              <a-row class="v-list-title">
                <a-col :span='10'>车辆信息</a-col>
                <a-col :span='9'>发布信息</a-col>
                <a-col :span='5'>查看</a-col>
              </a-row>
              <a-list itemLayout="vertical" size="large" :pagination="pagination" :dataSource="listData">
                <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">
                  <a-row>
                    <a-col :span='10' class="v-box v-address">
                       <a-list-item-meta>
                          <a slot="title">
                            {{item.title}}
                         </a>
                        </a-list-item-meta>
                        <p>{{item.carTitle}}</p>
                        <p>
                          {{item.oftenPlace}} {{item.price}}
                        </p>
                        <!-- <p>{{item.speaking}}</p> -->
                    </a-col>
                    <a-col :span='10' class="v-box v-company">
                      <a-list-item-meta>
                          <a slot="title">
                            {{item.companyName}}
                         </a>
                        </a-list-item-meta>
                        <p class="useStar">
                          用户星级
                          <img src="./../../.././static/img/info/allStar.png" alt="" />
                          <img src="./../../.././static/img/info/allStar.png" alt="" />
                          <img src="./../../.././static/img/info/allStar.png" alt="" />
                          <img src="./../../.././static/img/info/halfStar.png" alt="" />
                          <img src="./../../.././static/img/info/noStar.png" alt="" />
                        </p>
                        <div class="attestaion">已认证</div>
                    </a-col>
                    <a-col :span='4' class="v-box wy-p-l-15">
                      <a-button class="wy-m-b-15 wy-m-t--10" type='primary'>立即沟通</a-button>
                      <nuxt-link class="wy-m-b-15" :to="`/info/road/${item.id}`">
                        <a-button>查看详情</a-button>
                      </nuxt-link>
                      <p class="v-box-time">{{item.times}}</p>
                    </a-col>
                  </a-row>
                </a-list-item>
              </a-list>
            </div>
            <div class="v-work-pic"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SideMenu from './../components/SideMenu.vue'


export default {
   components: {
        SideMenu,
  },
  data () {
    return {
      listData:[
            {
               title: '云南省昆明市——北京市市辖区',
               carTitle:"车辆：滇A***23/厢式货车/车长6米/载重10吨/本地车",
               oftenPlace:"常驻地：昆明市",
               price:"运价：面议",
               speaking:"说明：装车就走",
               companyName:"北京荣之联科技股份有限公司",
               times:"2019-04-21",
               id:1
            },
            {
               title: '云南省昆明市——北京市市辖区',
               carTitle:"车辆：滇A***23/厢式货车/车长6米/载重10吨/本地车",
               oftenPlace:"常驻地：昆明市",
               price:"运价：面议",
               speaking:"说明：装车就走",
               companyName:"北京荣之联科技股份有限公司",
               times:"2019-04-21",
               id:1
            },
            {
               title: '云南省昆明市——北京市市辖区',
               carTitle:"车辆：滇A***23/厢式货车/车长6米/载重10吨/本地车",
               oftenPlace:"常驻地：昆明市",
               price:"运价：面议",
               speaking:"说明：装车就走",
               companyName:"北京荣之联科技股份有限公司",
               times:"2019-04-21",
               id:1
            },
            {
               title: '云南省昆明市——北京市市辖区',
               carTitle:"车辆：滇A***23/厢式货车/车长6米/载重10吨/本地车",
               oftenPlace:"常驻地：昆明市",
               price:"运价：面议",
               speaking:"说明：装车就走",
               companyName:"北京荣之联科技股份有限公司",
               times:"2019-04-21",
               id:1
            },
            {
               title: '云南省昆明市——北京市市辖区',
               carTitle:"车辆：滇A***23/厢式货车/车长6米/载重10吨/本地车",
               oftenPlace:"常驻地：昆明市",
               price:"运价：面议",
               speaking:"说明：装车就走",
               companyName:"北京荣之联科技股份有限公司",
               times:"2019-04-21",
               id:1
            }
      ],
     pagination: {
        onChange: (page) => {
          console.log(page);
        },
        pageSize: 6,
      },
    }
  },
}

</script>
<style lang="scss">
@import "./../../../assets/css/info/info.scss";
</style>